vue2.x(vue

2024-06-19 23:57| 来源: 网络整理| 查看: 265

注意：如果是vue-cli3.x版本以上的配置请看 https://blog.csdn.net/m0_38134431/article/details/104802038

1、在config/index.js设置配置文件，跨域配置代理

（默认里面内容为空，我们需要加入对跨域接口的配置）根据接口的不同设置的请求头和主机也不同，自己按照格式要求进行配置即可。在这里插入图片描述如上图配置好了之后，'/getapis/getCurrentCity'为自定义的axios请求路径，自己根据相应接口功能来命名。后面在用axios请求接口的时候，url路径就要写自定义的这个，那么代理就会自动解析成对应的请求接口了。

注意：修改了配置文件之后要重新启动项目！

2、配置了代理之后，我们就可以使用axios来进行跨域请求受保护的接口了

一般会在额外的js文件中，进行接口请求的参数拼接和请求传回的数据的格式进行处理。这时候这个js文件就需要额外引入axios（注意vue组件js代码块中用的，和js文件用的不一样。我们在这里直接import引入即可使用）：

getCurrentCity.js文件代码如下图代码所示：参数的拼接：在这里插入图片描述 axios请求接口返回数据的处理（如果需要处理的话才处理）：

3、在vue组件中就能调用函数取到到接口数据了 import {getCurrentCity} from 'common/apis/getCurrentCity.js' export default { methods:{ _getCurrentCity () { // 在这里就可以获取到当前城市的接口数据了 getCityCurrent().then((res) => { // 打印出获取到的数据 console.log(res) }).catch((err) => { console.log(err) }) } }, mounted () { this._getCurrentCity() } } 常见问题：

1、按照上面步骤配置好后请求接口报错404 首先需要排查自己的参数是否和原接口一样；

然后把自己的请求地址前面代理部分替换成target中地址，输入到浏览器地址栏看看是否能成功访问不报错404；在这里插入图片描述如果能够正常访问不报404错误的话，那就是地址没问题；

最后排查自己的proxyTable配置中是不是有多个跨域接口配置，pathRewrite是否有冲突了，导致地址解析错误而报错404，如果是的话修改为不一样的。

2、运行后还是报错Access-Control-Allow-Origin错误查看自己的bypass请求头是否按照别人的地址写对了。在这里插入图片描述

2020/03/19 注释：现在vue-cli版本已经发布到了4.x版本，配置代理的方式也改变了，详细请看官网： https://cli.vuejs.org/zh/config/#devserver-proxy

常用的vue.config.js配置请看： https://blog.csdn.net/m0_38134431/article/details/104802038

【本文地址】

公司简介

联系我们